import { Fragment } from '@/components/Fragment'; 
import { Placeholder } from '@aws-amplify/ui-react';

import { PlaceholderDemo } from './demo';
import {
  DefaultPlaceholderExample,
  PlaceholderIsLoadedExample,
  PlaceholderSizeExample,
  PlaceholderStylePropsExample,
  PlaceholderThemeExample,
} from './examples';
import { Example, ExampleCode } from '@/components/Example';
import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay';
import ThemeExample from '@/components/ThemeExample.mdx';

## Demo

<PlaceholderDemo />

## Usage

Import the Placeholder component.

<Example>
  <DefaultPlaceholderExample />
  <ExampleCode>
    ```jsx file=./examples/DefaultPlaceholderExample.tsx 
    
    ```

  </ExampleCode>
</Example>

### isLoaded

Use `isLoaded` prop to indicate whether or not the content is loaded.

<Example>
  <PlaceholderIsLoadedExample />
  <ExampleCode>
    ```jsx file=./examples/PlaceholderIsLoadedExample.tsx

    ```

  </ExampleCode>
</Example>

### Sizes

Use the `size` prop to change the Placeholder size. Available options are `small`, `large`, and none (default).

<Example>
  <PlaceholderSizeExample />
  <ExampleCode>
    ```jsx file=./examples/PlaceholderSizeExample.tsx

    ```

  </ExampleCode>
</Example>

## Customization

<ThemeExample component="Placeholder">
  <Example>
    <PlaceholderThemeExample />
    
    <ExampleCode>

    ```tsx file=./examples/PlaceholderThemeExample.tsx

    ```

    </ExampleCode>
  </Example>
</ThemeExample>

### Target classes

<ComponentStyleDisplay componentName="Placeholder" />

### Global styling

To override styling on all Placeholder components, you can set the Amplify CSS variables or use the built-in `.amplify-placeholder` class.

<Example>
  <Placeholder className="placeholder-global-styles" />
  <ExampleCode>
    ```css
    /* styles.css */
    [data-amplify-theme] {
      --amplify-components-placeholder-height: var(--amplify-space-xl);
      --amplify-components-placeholder-border-radius: var(--amplify-space-medium);
    }
    /* OR */
    .amplify-placeholder {
      height: var(--amplify-space-xl);
      border-radius: var(--amplify-space-medium);
    }
    ```

  </ExampleCode>
  <ExampleCode>
    ```jsx
    <Placeholder />
    ```
  </ExampleCode>
</Example>

### Local styling

To override styling on a specific Placeholder, you can use a class selector or style props.

_Using a class selector:_

Set the starting and ending colors for the Placeholder animation using a custom CSS class with the Amplify CSS variables:

<Example>
   <Placeholder className="placeholder-local-styles" />
  <ExampleCode>
    ```css
    /* styles.css */
    .placeholder-local-styles {
      --amplify-components-placeholder-start-color: var(--amplify-colors-purple-80);
      --amplify-components-placeholder-end-color: var(--amplify-colors-blue-80);
    }
    ```
  </ExampleCode>
  <ExampleCode>
    ```jsx
    import './styles.css';

    <Placeholder className="placeholder-local-styles" />
    ```

  </ExampleCode>
</Example>

_Using style props:_

<Example>
  <PlaceholderStylePropsExample />
  <ExampleCode>
    ```jsx file=./examples/PlaceholderStylePropsExample.tsx
    
    ```

  </ExampleCode>
</Example>